<template>
  <el-image
    class="base-img-container"
    v-bind="$attrs"
    fit="cover"
    :preview-src-list="fileList"
    :src="imgUrl"
  />
</template>

<script>
export default {
  props: {
    preview: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fileList: [],
      imgUrl: ''
    }
  },
  watch: {
    '$attrs.src': {
      handler() {
        this.initImg()
      },
      immediate: true
    }
  },
  methods: {
    initImg() {
      const UpUrl = this.$store.getters.imgURL
      const imgSrc = this.$attrs.origin_img || this.$attrs.src
      if (imgSrc.includes(UpUrl)) {
        this.imgUrl = imgSrc
      } else {
        this.imgUrl = UpUrl + imgSrc
      }

      if (this.preview && !this.$attrs.fileList?.length) {
        this.fileList.push(this.imgUrl)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.base-img-container {
  cursor: pointer;
  ::v-deep .el-image__inner {
    vertical-align: middle;
  }
}
</style>
